<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <vue-particles
        id="tsparticles" :options="opt3"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data() {
    return {
      opt1: {
        "fullScreen": {
          "zIndex": 1
        },
        "emitters": {
          "position": {
            "x": 50,
            "y": 100
          },
          "rate": {
            "quantity": 5,
            "delay": 0.15
          }
        },
        "particles": {
          "color": {
            "value": [
              "#1E00FF",
              "#FF0061",
              "#E1FF00",
              "#00FF9E"
            ]
          },
          "move": {
            "decay": 0.05,
            "direction": "top",
            "enable": true,
            "gravity": {
              "enable": true
            },
            "outModes": {
              "top": "none",
              "default": "destroy"
            },
            "speed": {
              "min": 50,
              "max": 100
            }
          },
          "number": {
            "value": 0
          },
          "opacity": {
            "value": 1
          },
          "rotate": {
            "value": {
              "min": 0,
              "max": 360
            },
            "direction": "random",
            "animation": {
              "enable": true,
              "speed": 30
            }
          },
          "tilt": {
            "direction": "random",
            "enable": true,
            "value": {
              "min": 0,
              "max": 360
            },
            "animation": {
              "enable": true,
              "speed": 30
            }
          },
          "size": {
            "value": 3,
            "animation": {
              "enable": true,
              "startValue": "min",
              "count": 1,
              "speed": 16,
              "sync": true
            }
          },
          "roll": {
            "darken": {
              "enable": true,
              "value": 25
            },
            "enlighten": {
              "enable": true,
              "value": 25
            },
            "enable": true,
            "speed": {
              "min": 5,
              "max": 15
            }
          },
          "wobble": {
            "distance": 30,
            "enable": true,
            "speed": {
              "min": -7,
              "max": 7
            }
          },
          "shape": {
            "type": "image",
            "options": {
              "image": [
                {
                  "src": require("@/assets/logo.png"),
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                }
              ]
            }
          }
        },
        "responsive": [
          {
            "maxWidth": 1024,
            "options": {
              "particles": {
                "move": {
                  "speed": {
                    "min": 33,
                    "max": 66
                  }
                }
              }
            }
          }
        ]
      },
      opt3: {
        "background": {
          "color": {
            "value": "#000000"
          },
          "image": "",
          "position": "",
          "repeat": "",
          "size": "",
          "opacity": 1
        },
        "fullScreen": {
          "zIndex": 1
        },
        "emitters": {
          "autoPlay": true,
          "fill": true,
          "life": {
            "wait": false
          },
          "rate": {
            "quantity": 10,
            "delay": 0.05
          },
          "shape": {
            "options": {},
            "replace": {
              "color": false,
              "opacity": false
            },
            "type": "square"
          },
          "startCount": 0,
          "size": {
            "mode": "percent",
            "height": 100,
            "width": 30
          },
          "particles": {},
          "position": {
            "x": 50,
            "y": 100
          }
        },
        "particles": {
          "color": {
            "value": [
              "#1E00FF",
              "#FF0061",
              "#E1FF00",
              "#00FF9E"
            ]
          },
          "move": {
            "decay": 0.03,
            "direction": "top",
            "enable": true,
            "gravity": {
              "enable": true
            },
            "outModes": {
              "top": "none",
              "default": "destroy"
            },
            "speed": {
              "min": 50,
              "max": 100
            }
          },
          "number": {
            "value": 0
          },
          "opacity": {
            "value": 1
          },
          "rotate": {
            "value": {
              "min": 0,
              "max": 360
            },
            "direction": "random",
            "animation": {
              "enable": true,
              "speed": 30
            }
          },
          "tilt": {
            "direction": "random",
            "enable": true,
            "value": {
              "min": 0,
              "max": 360
            },
            "animation": {
              "enable": true,
              "speed": 30
            }
          },
          "size": {
            "value": 3,
            "animation": {
              "enable": true,
              "startValue": "min",
              "count": 1,
              "speed": 16,
              "sync": true
            }
          },
          "roll": {
            "darken": {
              "enable": true,
              "value": 25
            },
            "enlighten": {
              "enable": true,
              "value": 25
            },
            "enable": true,
            "speed": {
              "min": 5,
              "max": 15
            }
          },
          "wobble": {
            "distance": 30,
            "enable": true,
            "speed": {
              "min": -7,
              "max": 7
            }
          },
          "shape": {
            "type": [
              "circle",
              "square",
              "emoji",
              "image"
            ],
            "options": {
              "emoji": {
                "particles": {
                  "size": {
                    "value": 8
                  }
                },
                "value": [
                  "💩",
                  "🤡",
                  "🍀",
                  "🍙",
                  "🦄",
                  "⭐️"
                ]
              },
              "image": [
                {
                  "src": "https://particles.js.org/images/fruits/apple.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                },
                {
                  "src": "https://particles.js.org/images/fruits/avocado.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                },
                {
                  "src": "https://particles.js.org/images/fruits/banana.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                },
                {
                  "src": "https://particles.js.org/images/fruits/berries.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                },
                {
                  "src": "https://particles.js.org/images/fruits/cherry.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                },
                {
                  "src": "https://particles.js.org/images/fruits/grapes.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                },
                {
                  "src": "https://particles.js.org/images/fruits/lemon.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                },
                {
                  "src": "https://particles.js.org/images/fruits/orange.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                },
                {
                  "src": "https://particles.js.org/images/fruits/peach.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                },
                {
                  "src": "https://particles.js.org/images/fruits/pear.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                },
                {
                  "src": "https://particles.js.org/images/fruits/pepper.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                },
                {
                  "src": "https://particles.js.org/images/fruits/plum.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                },
                {
                  "src": "https://particles.js.org/images/fruits/star.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                },
                {
                  "src": "https://particles.js.org/images/fruits/strawberry.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                },
                {
                  "src": "https://particles.js.org/images/fruits/watermelon.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                },
                {
                  "src": "https://particles.js.org/images/fruits/watermelon_slice.png",
                  "width": 32,
                  "height": 32,
                  "particles": {
                    "size": {
                      "value": 16
                    }
                  }
                }
              ]
            }
          }
        },
        "responsive": [
          {
            "maxWidth": 1024,
            "options": {
              "particles": {
                "move": {
                  "speed": {
                    "min": 33,
                    "max": 66
                  }
                }
              }
            }
          }
        ]
      }
    }
  },
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
